<script setup lang="ts">
const visible = defineModel('visible', { default: false })

const treeData = ref(
  [
    {
      label: '商户端',
      value: '-1',
      children: [
        {
          label: '权限中心',
          value: '-11',
          children: [
            {
              label: '首页',
              value: 'a',
            },
            {
              label: '项目管理',
              value: 'b',
              children: [
                {
                  label: '新增',
                  value: 'b-1',
                },
                {
                  label: '编辑',
                  value: 'b-2',
                },
                {
                  label: '删除',
                  value: 'b-3',
                },
              ],
            },
            {
              label: '应用管理',
              value: 'c',
              children: [
                {
                  label: '新增',
                  value: 'c-1',
                },
                {
                  label: '编辑',
                  value: 'c-2',
                },
                {
                  label: '删除',
                  value: 'c-3',
                },
              ],
            },
            {
              label: '菜单管理',
              value: 'd',
            },
            {
              label: '用户管理',
              value: 'e',
            },
          ],
        },
        {
          label: '配置中心',
          value: '-12',
          children: [
            {
              label: '首页',
              value: '-12a',
            },
          ],
        },
        {
          label: '翻译中心',
          value: '-13',
          children: [
            {
              label: '首页',
              value: '-13a',
            },
          ],
        },
      ],
    },
    {
      label: '工厂端',
      value: '-2',
      children: [
        {
          label: '配置中心',
          value: '-22',
          children: [
            {
              label: '首页',
              value: '-22a',
            },
          ],
        },
        {
          label: '翻译中心',
          value: '-23',
          children: [
            {
              label: '首页',
              value: '-23a',
            },
          ],
        },
      ],
    },
    {
      label: '运营端',
      value: '-3',
      children: [
        {
          label: '翻译中心',
          value: '-33',
          children: [
            {
              label: '首页',
              value: '-33a',
            },
          ],
        },
      ],
    },
  ],
)
</script>

<template>
  <ElDrawer
    v-model="visible"
    title="设置权限"
    direction="rtl"
    size="70%"
  >
    <ElTree
      :data="treeData"
      show-checkbox
    >
      <template
        #default="{ data }"
      >
        <div class="mr-12px">
          {{ data.label }}
        </div>
      </template>
    </ElTree>
  </ElDrawer>
</template>

<style lang="less" scoped>
:deep(.el-form-item .el-form-item) {
  margin-bottom: 16px;
}
</style>
